<style lang="less">
@import '../../../styles/common.less';
</style>

<template>
    <Card>
        <Card>
            <Form action="" method="get" name="exportSummary" id="exportSummary" enctype="multipart/form-data" inline>
                <header>
                    <span> 客户姓名：</span>
                    <Input v-model="paymentCompanyCondition.custName" style="width: 150px" name="custName" />
                    <span>身份证号:</span>
                    <Input v-model="paymentCompanyCondition.custNo" style="width: 150px" name="custNo" />
                    <span>对账结果：</span>
                    <Select v-model="paymentCompanyCondition.recResult" style="width:150px" name="recResult">
                        <Option v-for="item in recResultList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <span>费用类型：</span>
                    <Select v-model="paymentCompanyCondition.feeType" style="width:150px" name="feeType">
                        <Option v-for="item in feeTypeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                    <Button type="primary" @click="listQuery">查询</Button>
                    <Button type="primary" @click="downExcel">下载excel</Button>
                </header>
            </Form>
        </Card>
        <Card>
            <Row type="flex" justify="center" align="middle">
                <Table :columns="orderColumns" :data="orderData" style="width: 100%;"></Table>
            </Row>
            <div style="margin-top: 36px;text-align: center;">
                <Page :total="paymentCompanyCondition.total" :current="paymentCompanyCondition.pageNum" :page-size="paymentCompanyCondition.pageSize" size="small" show-elevator show-sizer show-total @on-change="pageChange" @on-page-size-change="sizeChange"></Page>
            </div>
        </Card>
    </Card>
</template>
<script>
export default {
  name: 'mutative-router',
  data () {
    return {
      paymentCompanyCondition: {
        custName: '',
        custNo: '',
        feeType: '',
        recResult: '',
        pageNum: 1,
        pageSize: 10,
        total: 0,
        batchId: '',
        id: ''
      },
      recResultList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '对方有我方无'
        },
        {
          value: '2',
          label: '我方有对方无'
        },
        {
          value: '3',
          label: '对账金额不匹配'
        },
        {
          value: '4',
          label: '订单状态不匹配'
        }

      ],

      feeTypeList: [
        {
          value: '',
          label: '请选择'
        },
        {
          value: '1',
          label: '服务费'
        },
        {
          value: '2',
          label: '代扣'
        },
        {
          value: '3',
          label: '征信费用'
        },
        {
          value: '4',
          label: '车险分期前置服务费+保证金'
        }
      ],
      orderColumns: [
        {
          title: '序号',
          type: 'index',
          align: 'center'
        },
        {
          title: '订单编号',
          key: 'theyTransctionSeq',
          align: 'center'
        },
        {
          title: '客户姓名',
          key: 'customerName',
          align: 'center'
        },
        {
          title: '身份证号码',
          key: 'idNo',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobileNo',
          align: 'center'
        },
        {
          title: '渠道',
          key: 'channelName',
          align: 'center'
        },
        {
          title: '资金方',
          key: 'channelName',
          align: 'center'
        },
        {
          title: '银行名称',
          key: 'bankName',
          align: 'center'
        },
        {
          title: '扣款金额',
          key: 'theyTransctionAccount',
          align: 'center'
        },
        {
          title: '费用类型',
          key: 'feeType',
          align: 'center',
          render: (h, params) => {
            if (params.feeType === '1') {
              return h('div', {
              }, '服务费')
            } else if (params.feeType === '2') {
              return h('div', {
              }, '代扣')
            } else if (params.feeType === '3') {
              return h('div', {
              }, '征信费用')
            } else if (params.feeType === '4') {
              return h('div', {
              }, '车险分期前置服务费+保证金')
            }
          }
        },
        {
          title: '支付公司扣款时间',
          key: 'dataStartTime',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.dataStartTime))
            ])
          }
        },
        {
          title: '云科贷入账时间',
          key: 'ownerTransctionDate',
          align: 'center',
          render: (h, params) => {
            var vm = this
            return h('div', [
              h('span', vm.$util.loanModularFormatTime(params.row.ownerTransctionDate))
            ])
          }
        },
        {
          title: '对账结果',
          key: 'recResult',
          align: 'center',
          render: (h, params) => {
            if (params.recResult === '0') {
              return h('div', {
              }, '成功')
            } else if (params.recResult === '1') {
              return h('div', {
              }, '对方有我方无')
            } else if (params.recResult === '2') {
              return h('div', {
              }, '我方有对方无')
            } else if (params.recResult === '3') {
              return h('div', {
              }, '对账金额不匹配 ')
            } else if (params.recResult === '4') {
              return h('div', {
              }, '订单状态不匹配 ')
            }
          }
        }
      ],

      orderData: []
    }
  },
  computed: {
    avatorImage () {
      return localStorage.avatorImgPath
    }
  },

  created () {
    // 初始化当前页面请求对象实例
    this.$ajax = this.$util.ajax()
    this.paymentCompanyCondition.batchId = this.$route.params.data.batchId
    this.paymentCompanyCondition.id = this.$route.params.data.id
    this.listQuery()
  },

  methods: {
    pageChange: function (pageNum) {
      var vm = this
      vm.paymentCompanyCondition.pageNum = pageNum
      vm.listQuery()
    },
    sizeChange: function (pageLength) {
      var vm = this
      vm.paymentCompanyCondition.pageSize = pageLength
      vm.listQuery()
    },
    listQuery () {
      var vm = this
      this.$ajax.post(this.$appContext.marvels_core_financial + 'financial/loan/paymentReconciliy/service/detailDataList', vm.paymentCompanyCondition).then(re => {
        var data = re.data
        vm.orderData = data.data.list
        vm.paymentCompanyCondition.total = data.data.total
      }).catch(er => {

      })
    },
    downExcel () {
      // 下载
      document.getElementById('exportSummary').action = this.$appContext.marvels_core_financial + 'financial/loan/paymentReconciliy/service/downExcel'
      document.getElementById('exportSummary').submit()
    }

  }
}
</script>
